<template>
  <cj-popup v-model="showSlideVerify" round :closeable="true" title="请完成安全验证" class="c-ph30" @close="closeVerifyModal">
    <slide-verify
      :l="slideObj.l"
      :r="slideObj.r"
      :w="slideObj.w"
      :h="slideObj.h"
      slider-text="向右拖动滑块填充拼图"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      :imgs="imgs"
      :accuracy='5'
      class="c-mlr-auto c-mt32 c-pb40"
    ></slide-verify>
  </cj-popup>
</template>

<script>
import SlideVerify from "@/components/templates//slideVerify.vue";
export default {
  name: "PictureVerify",
  components: {
    SlideVerify
  },
  props: {
    sizeObj: {
      type: Object,
      default: null
    },
    showSlideVerify: {
      type: Boolean,
      default: false,
    }
  },
  watch: {
    sizeObj: {
      handler(val, oldVal) {
        if (val) {
          if (val.l) {
            this.slideObj.l = val.l
          }
          if (val.r) {
            this.slideObj.r = val.r
          }
          if (val.w) {
            this.slideObj.w = val.w
          }
          if (val.h) {
            this.slideObj.h = val.h
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      slideObj: {
        l: 42, //滑动碎片的大小
        r: 10, //滑动碎片的圆角
        w: 310, //画布的宽
        h: 155, //画布的高
      },
      imgs: [
        "https://knowledge-payment.oss-cn-beijing.aliyuncs.com/lj7l/resource/imgs/9ca90984/admin-fe_lj7l_uploadBox_RXinJm86S2F4m4yepfyS.jpg",
        "https://knowledge-payment.oss-cn-beijing.aliyuncs.com/lj7l/resource/imgs/9ca90984/admin-fe_lj7l_uploadBox_7YF2R5yhAfa2rEAx7c8N.jpg",
        "https://knowledge-payment.oss-cn-beijing.aliyuncs.com/lj7l/resource/imgs/9ca90984/admin-fe_lj7l_uploadBox_8EwJeMMJGSnX2ZKSmaW5.jpg",
        "https://knowledge-payment.oss-cn-beijing.aliyuncs.com/lj7l/resource/imgs/9ca90984/admin-fe_lj7l_uploadBox_hGknhGEkEJZRfARyhwiJ.jpg",
      ],
    }
  },
  mounted() {
    let clientWidth = document.documentElement.clientWidth; //获取HTML文档所在窗口的当前宽度
    let ratio = clientWidth / 16;
    this.slideObj.l = 1.2 * ratio;
    this.slideObj.r = 0.3 * ratio;
    this.slideObj.w = 11.5 * ratio;
    this.slideObj.h = 5.5 * ratio;
  },
  methods: {
    closeVerifyModal() {
      this.$emit('update:showSlideVerify', false)
    },
    onSuccess() {
      this.$emit('onSuccess')
    },
    onFail() {
      this.$emit('onFail')
    },
    onRefresh() {
      this.$emit('onRefresh')
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.slide-verify-slider-text {
  font-size: 0.7rem;
}
</style>